<template>
  <div class="sidebar"
       @mouseenter="Sidebar.mouseenter"
       @mouseleave="Sidebar.mouseleave"
       :class="{ 'sidebar__active': Sidebar.active}">
    <!-- 顶部标题区域 -->
    <div class="sidebar-title-wrapper" v-ripple>
      <div class="sidebar-title">
        <v-icon :icon="mdiMenu" :size="20" />
      </div>
      <div class="title-text">开始</div>
    </div>

    <!-- 底部图标区域 -->
    <div class="sidebar-icons">
      <!-- 用户图标 -->
      <div class="sidebar-title-wrapper" v-ripple>
        <div class="sidebar-title">💻</div>
        <div class="title-text">用户</div>
      </div>

      <!-- 设置图标 -->
      <div class="sidebar-title-wrapper" v-ripple>
        <div class="sidebar-title">
          <v-icon :icon="mdiCogOutline" :size="20" />
        </div>
        <div class="title-text">设置</div>
      </div>

      <!-- 电源图标 -->
      <div class="sidebar-title-wrapper" v-ripple>
        <div class="sidebar-title">
          <v-icon :icon="mdiPower" :size="20" />
        </div>
        <div class="title-text">电源</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { mdiPower, mdiMenu, mdiCogOutline } from "@mdi/js";
import { reactive } from "vue";

const Sidebar = reactive({
  active: false,
  count: null as number | null,
  mouseenter() {
    this.count = setTimeout(() => {
      this.active = true;
    }, 150); // 优化延迟时间为150ms
  },
  mouseleave() {
    if (this.count) clearTimeout(this.count);
    this.active = false;
  }
});
</script>

<style scoped lang="scss">
$sidebar_width: 40px;
$sidebar_color: rgba(51, 51, 51, 0.85); // 修改为半透明颜色
$active_width: 200px;

.sidebar {
  display: flex;
  position: fixed;
  flex-direction: column;
  height: 100%;
  width: $sidebar_width;
  background-color: $sidebar_color;
  backdrop-filter: blur(10px); // 添加毛玻璃效果
  color: white;
  z-index: 1;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); // 使用标准缓动曲线
  overflow: hidden; // 新增：防止内容溢出

  &__active {
    width: $active_width;
    box-shadow: 0 0 12px rgba(15, 23, 28, 0.2); // 调整阴影透明度
  }
}

.sidebar-title-wrapper {
  display: flex;
  align-items: center;
  min-height: 40px;
  width: 100%;
  overflow: hidden; // 关键修复：隐藏溢出内容
  border: 0.1px solid transparent;
  user-select: none;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border: 0.1px solid rgba(255, 255, 255, 0.3);
  }

  .title-text {
    opacity: 0; // 初始透明
    max-width: 0; // 初始宽度为0
    transition:
      opacity 0.2s ease 0.1s, // 延迟0.1s触发
      max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    padding-right: 12px; // 增加右边距
  }
}

.sidebar__active {
  .sidebar-title-wrapper .title-text {
    opacity: 1;
    max-width: 160px; // 大于实际文本宽度即可
  }
}

.sidebar-title {
  flex-shrink: 0; // 关键修复：禁止缩小
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.sidebar-icons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
</style>
